import { IndexBar, List, NavBar, Space, Tag } from "antd-mobile";
import React from "react";
import citys from "../../../public/cities.json";
import "./style.css";
import { useNavigate } from "react-router-dom";
const Login = () => {
  const navigate = useNavigate()
  const setCity = (city) => {
    console.log(city);
    localStorage.setItem("city", city);
    navigate('/')
  };
  return (
    <div>
      <NavBar>城市选择</NavBar>

      <div style={{ height: 100 }}>
        <h4>
          当前城市： <span>北京</span>{" "}
        </h4>
        <div>热门城市：</div>
        <Space wrap>
          {citys.hotCities.map((item, index) => {
            return (
              <Tag  key={index} onClick={() => setCity(item.name)}>
                {item.name}
              </Tag>
            );
          })}
        </Space>
      </div>

      <div className="cityH">
        <IndexBar>
          {citys.cityList.map((group) => {
            const { title, citys } = group;
            return (
              <IndexBar.Panel
                index={title}
                title={`${title}`}
                key={`标题${title}`}
              >
                <List>
                  {citys.map((item, index) => (
                    <List.Item key={index} onClick={() => setCity(item.name)}>
                      {item.name}
                    </List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
};

export default Login;
